<template>
  <el-drawer
    :title="title"
    :visible.sync="drawerVisible"
    size="60%"
  >
    <div v-loading="loading" class="details">
      <el-descriptions
        class="margin-top"
        title="申请人信息"
        :column="3"
        border
      >
        <template #extra>
          <!--          <div v-if="examineButtonVisible">-->
          <!--            <el-button type="success" size="small" @click="examineSuccess">审核通过</el-button>-->
          <!--            <el-button type="danger" size="small" @click="examineFail">审核不通过</el-button>-->
          <!--          </div>-->
          <div v-if="showIcon">
            <el-tag :type="stateTagOptions(details?.cance ? 2 : details?.review_status)?.type">
              {{ stateTagOptions(details?.cance ? 2 : details?.review_status)?.label }}
            </el-tag>
          </div>
        </template>
        <el-descriptions-item label="申请人姓名">{{ details?.user?.username ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ details?.user?.phone ?? '-' }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        title="司机信息"
        :column="3"
        border
        style="margin-top: 20px;"
      >
        <el-descriptions-item label="司机姓名">{{ details?.driver_name ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="司机驾照等级">{{ details?.driver_license_type ?? '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions class="margin-top" title="用车信息" :column="3" border style="margin-top: 20px;">
        <el-descriptions-item label="使用车辆">{{ details?.vehicle?.type?.name ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="用车时间">{{ details?.vehicle_usage_time ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ details?.customer_name ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="客户电话">{{ details?.customer_phone ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="用车路线">{{ details?.vehicle_route ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="用车原因">{{ details?.car_reason ?? '-' }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ details?.remark ?? '-' }}</el-descriptions-item>
        <el-descriptions-item v-if="details?.fail_reason" label="拒绝原因">{{ details?.fail_reason ?? '-' }}</el-descriptions-item>
      </el-descriptions>
    </div>

    <el-dialog
      :visible.sync="failReasonDialog"
      append-to-body
      :title="isSuccess ? '审核通过' : '审核不通过'"
      width="30%"
    >
      <template v-if="!isSuccess">
        <el-input
          v-model="failReason"
          placeholder="请输入拒绝原因"
          size="mini"
          type="textarea"
          :rows="2"
          show-word-limit
          :maxlength="200"
        />
      </template>

      <template v-if="isSuccess">
        <el-select
          v-if="isNeedDriver"
          v-model="driver"
          placeholder="请选择出车司机"
          style="width: 100%;"
        >
          <el-option
            v-for="item in driverList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <div v-if="!isNeedDriver" style="text-align: center; font-size: 18px;">
          是否通过该申请？
        </div>
      </template>

      <template #footer>
        <el-button size="mini" @click="onCancel">取消</el-button>
        <el-button size="mini" type="primary" @click="onConfirm">确定</el-button>
      </template>
    </el-dialog>
  </el-drawer>
</template>
<script>
import { getDriverList, getUseCarRecordDetail } from '@/api/vehicleService'
export default {
  name: '',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    recordId: {
      type: Number,
      default: null
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '用车申请审核'
    }
  },
  data() {
    return {
      details: null,
      failReason: '',
      failReasonDialog: false,
      loading: false,
      isSuccess: 1,
      driver: null,
      driverList: []
    }
  },
  computed: {
    drawerVisible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit('update:visible', value)
      }
    },
    isNeedDriver() {
      return this.details?.is_need_driver === 1
    },
    examineButtonVisible() {
      return !this.details?.cance && this.details?.review_status === null
    }
  },
  watch: {
    drawerVisible(n) {
      if (n && this.recordId) {
        this.getDetails()
      }
    }
  },
  created() {
    this.getDriverList()
  },
  methods: {
    async getDetails() {
      this.loading = true
      try {
        const res = await getUseCarRecordDetail(this.recordId)
        console.log('res --------->', res)
        this.details = res.data
      } catch (error) {
        this.$message.error(error?.response?.data?.message || '信息获取失败')
      } finally {
        await this.sleep(500)
        this.loading = false
      }
    },

    async getDriverList() {
      try {
        const res = await getDriverList()
        console.log('res --------->', res)
        this.driverList = res.data.map(item => {
          return {
            value: item.id,
            label: item?.user?.username
          }
        })
      } catch (error) {
        throw new Error(error.message || '获取司机列表失败')
      }
    },

    examineSuccess() {
      this.isSuccess = 1
      this.driver = this.details.driver_resources_id
      this.failReasonDialog = true
    },

    examineFail() {
      this.isSuccess = 0
      this.failReasonDialog = true
    },

    async onConfirm() {
      const valid = await this.validate(this.isSuccess ? 'driver' : 'failReason')
      if (!valid) return this.$message.error('请将信息填写完整！')
      this.$emit(
        'examine',
        {
          status: this.isSuccess,
          fail_reason: this.failReason,
          driver_resources_id: this.driver
        }
      )
      this.closeFailReasonDialog()
    },

    validate(field) {
      return new Promise(resolve => {
        if (field === 'driver' && !this.isNeedDriver) resolve(true)
        if (!this[field]) resolve(false)
        resolve(true)
      })
    },

    onCancel() {
      this.closeFailReasonDialog()
    },

    closeFailReasonDialog() {
      this.failReasonDialog = false
      this.failReason = ''
      this.isSuccess = 1
      this.driver = null
    },

    sleep(t) {
      return new Promise(r => setTimeout(r, t))
    },

    stateTagOptions(state) {
      const m = {
        success: {
          label: '审核通过',
          type: 'success'
        },
        failed: {
          label: '审核失败',
          type: 'danger'
        },
        cancel: {
          label: '撤销',
          type: 'danger'
        }
      }

      return m[this.stateFormatter(state)] || { label: '待审核', type: 'info' }
    },

    stateFormatter(state) {
      if (state === 1) return 'success'

      if (state === 0) return 'failed'

      if (state === 2) return 'cancel'
    }
  }
}
</script>
<style lang="scss" scoped>
.details {
  padding: 0 20px;
}
</style>
